<template>
  <div class="center-container">
    <!--  页面标题-->
    <div class="header-title">个人中心</div>

    <!--  内容区域-->
    <div class="center-form-area">
      <a-row>
        <a-col flex="350px">
          <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
            <a-form-item label="登录账号" name="loginName">
              <a-input class="form-item" v-model:value.trim="form.loginName" placeholder="请输入登录账号" disabled />
            </a-form-item>
            <a-form-item label="部门" name="departmentId">
              <DepartmentTreeSelect class="form-item" ref="departmentTreeSelect" width="100%" :init="false"
                v-model:value="form.departmentId" disabled />
            </a-form-item>
            <a-form-item label="员工名称" name="actualName">
              <a-input class="form-item" v-model:value.trim="form.actualName" placeholder="请输入员工名称" />
            </a-form-item>
            <a-form-item label="性别" name="gender">
              <smart-enum-select class="form-item" v-model:value="form.gender" placeholder="请选择性别"
                enum-name="GENDER_ENUM" />
            </a-form-item>
            <a-form-item label="手机号码" name="phone">
              <a-input class="form-item" v-model:value.trim="form.phone" placeholder="请输入手机号码" />
            </a-form-item>
            <a-form-item label="邮箱" name="email">
              <a-input v-model:value.trim="form.email" placeholder="请输入邮箱" />
            </a-form-item>
            <a-form-item label="职务" name="positionId">
              <PositionSelect v-model:value="form.positionId" placeholder="请选择职务" />
            </a-form-item>
            <a-form-item label="备注" name="remark">
              <a-textarea class="form-item" v-model:value="form.remark" placeholder="请输入备注" :rows="4" />
            </a-form-item>
          </a-form>
          <a-button type="primary" @click="onSubmit">更新个人信息</a-button>
        </a-col>
        <a-col flex="auto">
          <a-form style="padding-left: 80px" layout="vertical">
            <a-form-item label="头像" name="avatar">
              <br />
              <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
                :headers="{ Authorization: 'Bearer ' + useUserStore().getToken }" :customRequest="customRequest"
                :before-upload="beforeUpload">
                <div v-if="avatarUrl" class="avatar-container">
                  <img :src="avatarUrl" class="avatar-image" alt="avatar" />
                  <div class="overlay">
                    <span>更新头像</span>
                  </div>
                </div>
                <div v-else>
                  <loading-outlined v-if="updateAvatarLoading" />
                  <plus-outlined v-else />
                  <div class="ant-upload-text">上传头像</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { regular } from '/@/constants/regular-const.js';
import DepartmentTreeSelect from '/@/components/system/department-tree-select/index.vue';
import PositionSelect from '/@/components/system/position-select/index.vue';
import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
import { loginApi } from '/@/api/system/login-api.js';
import { useUserStore } from '/@/store/modules/system/user.js';
import { message } from 'ant-design-vue';
import { smartSentry } from '/@/lib/smart-sentry.js';
import { employeeApi } from '/@/api/system/employee-api';
import { SmartLoading } from '/@/components/framework/smart-loading/index.js';
import { fileApi } from '/@/api/kernel/file-api.js';
import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const.js';

// 组件ref
const formRef = ref();

const formDefault = {
  // 员工ID
  employeeId: undefined,
  // 头像
  avatar: undefined,
  // 登录账号
  loginName: '',
  // 员工名称
  actualName: '',
  // 性别
  gender: undefined,
  // 手机号码
  phone: '',
  // 部门id
  departmentId: undefined,
  // 邮箱
  email: undefined,
  // 职务级别
  positionId: undefined,
  // 是否禁用
  disabledFlag: undefined,
  // 备注
  remark: '',
};
let form = reactive({ ...formDefault });
const rules = {
  actualName: [
    { required: true, message: '姓名不能为空' },
    { max: 30, message: '姓名不能大于30个字符', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '手机号不能为空' },
    { pattern: regular.phone, message: '请输入正确的手机号码', trigger: 'blur' },
  ],
  gender: [{ required: true, message: '性别不能为空' }],
  email: [{ required: true, message: '请输入邮箱' }],
};
// 头像地址
let avatarUrl = ref();

// 查询登录信息
async function getLoginInfo() {
  try {
    //获取登录用户信息
    const res = await loginApi.getLoginInfo();
    let data = res.data;
    //更新用户信息到pinia
    useUserStore().setUserLoginInfo(data);
    // 当前form展示
    form.employeeId = data.employeeId;
    form.loginName = data.loginName;
    form.actualName = data.actualName;
    form.gender = data.gender;
    form.phone = data.phone;
    form.departmentId = data.departmentId;
    form.email = data.email;
    form.positionId = data.positionId;
    form.remark = data.remark;
    form.disabledFlag = data.disabledFlag;
    // 头像展示
    avatarUrl.value = data.avatar;
  } catch (e) {
    smartSentry.captureError(e);
  }
}

// 头像上传
const accept = ref('.jpg,.jpeg,.png,.gif');
const maxSize = ref(10);
const folder = ref(FILE_FOLDER_TYPE_ENUM.COMMON.value);
let updateAvatarLoading = ref(false);
function beforeUpload(file, files) {
  const suffixIndex = file.name.lastIndexOf('.');
  const fileSuffix = file.name.substring(suffixIndex <= -1 ? 0 : suffixIndex);
  if (accept.value.indexOf(fileSuffix) === -1) {
    message.error(`只支持上传 ${accept.value.replaceAll(',', ' ')} 格式的文件`);
    return false;
  }

  const isLimitSize = file.size / 1024 / 1024 < maxSize.value;
  if (!isLimitSize) {
    message.error(`单个文件大小必须小于 ${maxSize.value} Mb`);
    return false;
  }
  return true;
}

async function customRequest(options) {
  updateAvatarLoading.value = true;
  try {
    const formData = new FormData();
    formData.append('file', options.file);
    let res = await fileApi.uploadFile(formData, folder.value);
    let file = res.data;
    avatarUrl.value = file.fileUrl;
    // 更新头像
    let updateAvatarForm = { avatar: file.fileKey };
    await employeeApi.updateAvatar(updateAvatarForm);
    message.success('更新成功');
    // 重新获取详情，刷新整体缓存
    await getLoginInfo();
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    updateAvatarLoading.value = false;
  }
}

// 更新员工信息
async function updateEmployee() {
  SmartLoading.show();
  try {
    await employeeApi.updateCenter(form);
    message.success('更新成功');
    // 重新获取详情，刷新整体缓存
    await getLoginInfo();
  } catch (error) {
    smartSentry.captureError(error);
  } finally {
    SmartLoading.hide();
  }
}

// 表单提交
function onSubmit() {
  formRef.value
    .validate()
    .then(() => {
      updateEmployee();
    })
    .catch((error) => {
      console.log('error', error);
      message.error('参数验证错误，请仔细填写表单数据!');
    });
}

onMounted(() => {
  getLoginInfo();
});
</script>
<style lang="less" scoped>
.center-container {
  .header-title {
    font-size: 20px;
  }

  .center-form-area {
    margin-top: 20px;

    .avatar-container {
      position: relative;
      border-radius: 50%;
      overflow: hidden;
      width: 100%;
      height: 100%;

      .avatar-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 17px;
      }

      &:hover .overlay {
        opacity: 1;
        /* 鼠标悬停时显示蒙版 */
      }
    }

    .avatar-uploader {
      :deep(.ant-upload) {
        border-radius: 50%;
        width: 150px;
        height: 150px;
      }
    }

    .ant-upload-select-picture-card i {
      font-size: 32px;
      color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
      margin-top: 8px;
      color: #666;
    }
  }
}
</style>
